<template>
  <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
    <div class="site-navbar__header">
      <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
        <a class="site-navbar__brand-lg" href="javascript:void(0);">党员管理系统</a>
        <a class="site-navbar__brand-mini" href="javascript:void(0);">党员管理系统</a>
      </h1>
    </div>
    <div class="site-navbar__body clearfix">
      <el-menu
        class="site-navbar__menu"
        mode="horizontal">
        <el-menu-item class="site-navbar__switch" index="0" @click="toggleSidebar">
          <icon-svg name="zhedie"></icon-svg>
        </el-menu-item>
      </el-menu>
      <el-menu
        class="site-navbar__menu site-navbar__menu--right"
        mode="horizontal">
        <el-menu-item index="1" @click="$router.push({ name: 'theme' })">
          <template #title>
            <el-badge value="new">
              <icon-svg name="shezhi" class="el-icon-setting"></icon-svg>
            </el-badge>
          </template>
        </el-menu-item>
        <el-menu-item class="site-navbar__avatar" index="3">
          <el-dropdown :show-timeout="0" placement="bottom">
            <span class="el-dropdown-link user-info">
              <img class="user-avatar" src="~@/assets/img/avatar.png" :alt="userName" />
              <span class="user-name">{{ userName }}</span>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click="updatePasswordHandle">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logoutHandle">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePasswordVisible" ref="updatePassword"></update-password>
  </nav>
</template>

<script>
import UpdatePassword from './main-navbar-update-password';
import { clearLoginInfo } from '@/utils';
export default {
  data() {
    return {
      updatePasswordVisible: false,
    };
  },
  components: {
    UpdatePassword,
  },
  computed: {
    navbarLayoutType() {
      return this.$store.state.common.navbarLayoutType;
    },
    sidebarFold: {
      get() {
        return this.$store.state.common.sidebarFold;
      },
      set(val) {
        this.$store.commit('common/updateSidebarFold', val);
      },
    },
    userName() {
      return this.$store.state.user.name;
    },
  },
  methods: {
    toggleSidebar() {
      this.sidebarFold = !this.sidebarFold;
    },
    updatePasswordHandle() {
      this.updatePasswordVisible = true;
      this.$nextTick(() => {
        this.$refs.updatePassword.init();
      });
    },
    async logoutHandle() {
      try {
        await this.$confirm('确定进行[退出]操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        });
        const { data } = await this.$http({
          url: this.$http.adornUrl('/sys/logout'),
          method: 'post',
          data: this.$http.adornData(),
        });
        if (data && data.code === 0) {
          clearLoginInfo();
          this.$router.push({ name: 'login' });
        }
      } catch (error) {
        console.error('Logout cancelled or failed:', error);
      }
    },
  },
};
</script>

<style scoped>
.user-info {
  display: flex;
  align-items: center;
}
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
}
.user-name {
  font-size: 14px;
  color: #333;
}
</style>
